<template>
    <div class="con">
        <div class="header">
            <p @click="getcard(1)" :class="{ active: isActive}">
                支付信用卡
                <span v-show="isActive"></span>
            </p>
            <p @click="getcard(0)" :class="{ active: !isActive}">
                收款储蓄卡
                <span v-show="!isActive"></span>
            </p>
        </div>
        <div class="commontitle" @click="add()" v-show="isActive">
            <img src="../../assets/images/add.png" alt>
            添加支付信用卡
        </div>
        <ul>
            <li v-for="(item,index) in data" :key="index">
                <img :src="item.logoUrl" alt class="logoUrl">
                <p class="bankName">{{item.bankName}}</p>
                <p class="card">{{card}}</p>
                <div class="cardnum">
                    <span>{{item.accountNo.substr(0,4)}}</span>
                    <span>****</span>
                    <span>****</span>
                    <span>{{item.accountNo.substr(item.accountNo.length-4)}}</span>
                </div>
                <div v-show="isActive" @click="show=true" class="img">
                    <img src="../../assets/images/bin.png" alt class="bin">
                </div>
                <div v-show="!isActive" class="img" @click="updatesavecard()">
                    <img src="../../assets/images/edit.png" alt class="bin">
                </div>
                <van-dialog
                    v-model="show"
                    title="确认删除该信用卡吗"
                    show-cancel-button
                    @confirm="okdel(item.id)"
                ></van-dialog>
            </li>
        </ul>
        <p class="tip">支持哪些银行？ <span @click="banklist()">查看</span></p>
    </div>
</template>

<script>
export default {
    name: "mycard",
    data() {
        return {
            timestamp: "",
            data: {},
            isActive: true,
            card: "信用卡",
            show: false
        };
    },
    methods: {
        add() {
            this.$router.push({ name: "addcreditcard",params:{type:2} });
        },
         updatesavecard() {
            this.$router.push({ name: "updatesavecard",params:{type:2} });
        },
         banklist() {
            this.$router.push({ name: "banklist" });
        },
        // 删除信用卡
        okdel(id) {
            this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/account/unbind?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId"),
                    cardId: id
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.data = response.data.data;
                        this.$toast(response.data.message);

                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        },
        getcard(num) {
            if (num == 1) {
                this.isActive = true;
                this.card = "信用卡";
            } else {
                this.isActive = false;
                this.card = "储蓄卡";
            }
            this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/bankCard/getBankCardListByUserId?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId"),
                    cardType: num
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.data = response.data.data;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.axios({
            method: "post",
            url: `${
                this.siteUrl
            }/app/bankCard/getBankCardListByUserId?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`,
            data: {
                userId: localStorage.getItem("userId"),
                cardType: 1
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    this.data = response.data.data;
                } else {
                    this.$toast(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
    overflow: hidden;
}
.con .commontitle {
    width: 100%;
    height: 62px;
    line-height: 62px;
    color: #2d3659;
    font-size: 14px;
    padding-left: 15px;
    background: #fff;
    margin-top: 24px;
    margin-bottom: 12px;
}
.commontitle img {
    width: 16px;
    margin-right: 10px;
    vertical-align: -1px;
}
.header {
    height: 50px;
    background: #fff;
}
.header p {
    width: 50%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    float: left;
    position: relative;
    color: #f2f2f2;
}
.header p span {
    height: 3px;
    width: 30px;
    background: #2d3659;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -15px;
}

ul li {
    width: 90%;
    margin-left: 5%;
    background: #fff;
    height: 125px;
    border-radius: 6px;
    position: relative;
    margin-top: 20px;
}
ul li .logoUrl {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 20px;
    top: 20px;
}
ul li .bankName {
    position: absolute;
    top: 20px;
    left: 67px;
}
ul li .card {
    position: absolute;
    top: 44px;
    left: 67px;
    color: #2d3659;
    font-weight: 200;
    font-size: 12px;
}
ul li .bin {
    width: 16px;
}
ul li .img {
    position: absolute;
    top: 24px;
    right: 20px;
    width: 20px;
    height: 20px;
}
ul li .cardnum {
    font-size: 22px;
    position: absolute;
    top: 76px;
    left: 67px;
}
.header .active {
    color: #2d3659;
}
.tip{
    color:#A6A9B5;
    font-size: 12px;
    text-align: center;
    margin-top: 24px;
}
.tip span{
    color:#FFAE4E;
}
</style>
